<template>
  <div v-loading="loading" v-loading.fullscreen.lock="fullscreenLoading" :element-loading-text="$t('message.uploading')">
    <setForm id="0">
      <template slot="boxTop">{{$t('message.systems.productInfo')}}</template>
      <template slot="boxMain">
        <mylist :list="list"></mylist>
      </template>
    </setForm>
    <setForm id="0">
      <template slot="boxTop">{{$t('message.systems.productname')}}</template>
      <template slot="boxMain">
        <el-row>
          <el-col :span="4" class="col4">
            <div class="span3">
              <label>{{$t('message.systems.name')}}：</label>
            </div>
          </el-col>
          <el-col :span="20" class="col20">
            <div class="span17">
              <el-input v-model="system.productInfo.name" v-validate="'valiName|max:30|valiStart'" type="text" class="span17_elinput" name="valiName"></el-input>
              <span v-show="this.errors.has('valiName')" class="text-style"> {{ errors.first('valiName') }} </span>
            </div>
          </el-col>
        </el-row>
        <el-button class="btnsave" @click="saveDevName">{{$t('message.save')}}</el-button>
      </template>
    </setForm>
    <setForm id="1">
      <template slot="boxTop">{{$t('message.systems.sysTime')}}</template>
      <template slot="boxMain">
        <el-row>
          <el-col :span="4" class="col4time">
            <div class="span3">
              <label>{{$t('message.systems.sysTime')}}</label>
            </div>
            <div class="span3">
              <label>{{$t('message.systems.NTPAddr')}}</label>
            </div>
            <div class="span3">
              <label>{{$t('message.systems.autoCheckTime')}}</label>
            </div>
          </el-col>
          <el-col :span="20" class="col20">
            <div class="span17">
              <el-date-picker v-model="sysTime" type="datetime" style="width:30%;"></el-date-picker>
              <el-button style="width:19.5%;" @click="onFitLocalTime">{{$t('message.systems.fitLocaltime')}}</el-button>
            </div>
            <div class="span17">
              <el-input id="ipFormat" v-model="system.sysTime.NTPAddr" v-validate="'ipFormat'" type="text" class="span17_elinput" name="ipFormat"></el-input>
              <span v-show="this.errors.has('ipFormat')" class="text-style" style="height:40px;width:31%"> {{ errors.first('ipFormat') }} </span>
            </div>
            <div class="span17">
              <el-switch v-model="system.sysTime.autoSetTime"></el-switch>
              <br>
            </div>

          </el-col>
        </el-row>
        <el-button class="btnsave" @click="saveSystime">{{$t('message.save')}}</el-button>
      </template>
    </setForm>
    <setForm id="2" v-show="isShowAgingtest">
      <template slot="boxTop">{{$t('message.systems.agingTest')}}</template>
      <template slot="boxMain">
        <el-table :data="agingData" style="width: 100%">
          <el-table-column :label="$t('message.systems.status')" prop="status">
          </el-table-column>
          <el-table-column :label="$t('message.systems.setDuration')" prop="setDuration">
          </el-table-column>
          <el-table-column :label="$t('message.systems.currDuration')" prop="currDuration">
          </el-table-column>
          <el-table-column :label="$t('message.systems.totalDuration')" prop="totalDuration">
          </el-table-column>
          <el-table-column :label="$t('message.medias.operation')">
            <template slot-scope="scope">
              <el-button size="mini" v-show="isShowStart" @click="editAgingTest(scope.$index, scope.row)">{{$t('message.systems.agingTest')}}</el-button>
              <el-button size="mini" v-show="isShowEnd" @click="endAgingTest">{{$t('message.systems.endTest')}}</el-button>
              <el-button size="mini" v-show="isShowSetErr" @click="setTestError">{{$t('message.systems.setTestError')}}</el-button>
              <el-button size="mini" v-show="isShowClearErr" @click="clearTestError">{{$t('message.systems.clearTestError')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </setForm>
    <setForm id="3">
      <template slot="boxTop">{{$t('message.systems.server')}}</template>
      <template slot="boxMain">
        <el-row>
          <el-col :span="4" class="col4time">
            <div class="span3">
              <label>{{$t('message.systems.ipaddr')}}</label>
            </div>
            <div class="span3">
              <label>{{$t('message.systems.type')}}</label>
            </div>
            <div class="span3">
              <label>{{$t('message.systems.domain')}}</label>
            </div>
          </el-col>
          <el-col :span="20" class="col20">
            <div class="span17">
              <el-input v-model="serverInfo.ipaddr" v-validate="'ipFormat'" type="text" class="span17_elinput" name="IP"></el-input>
              <span v-show="this.errors.has('IP')" class="text-style" style="height:40px;width:31%"> {{ errors.first('IP') }} </span>
            </div>
            <div class="span17">
              <select style="width:50%;"  v-model="serverInfo.type">
                <option v-for="option in serverTypes" :key="option" :value="option" :label="option">{{option}}</option>
              </select>
            </div>
            <div class="span17">
              <el-input id="ipFormat" v-model="serverInfo.domain"  type="text" class="span17_elinput" name="ipFormat"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-button class="btnsave" @click="saveSysServerInfo">{{$t('message.save')}}</el-button>
      </template>
    </setForm>
    <setForm id="4">
      <template slot="boxTop">{{$t('message.systems.imexportCofnig')}}</template>
      <template slot="boxMain">
        <el-row v-loading="cfgloading" v-loading.fullscreen.lock="cfgfullscreenLoading" :element-loading-text="$t('message.systems.iniUploading')">
          <el-col :span="17" class="col17">
            <div id="normal">
              <input type="text" class="path" id="f_file">
              <input type="button" :value="$t('message.systems.browse')" class="file" onClick="fileIni.click()">
              <input name="upload" type="file" id="fileIni" accept=".tar,.tar.gz,.tgz" checked="checkFileName()" onchange="f_file.value=this.value"
                style="display:none">
              <el-progress :stroke-width="10" :percentage="iniUploadPercent" style="width:65%;" v-show="isShowIniUploadProgres"></el-progress>
              <!--进度条外层容器-->
              <div id="wrapper1">
                <!--进度条容器-->
                <div id="progressbar1">
                  <!--用来模仿进度条推进效果的进度条元素-->
                  <div id="fill1"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-button class="btnsave" @click="ImportIni">{{$t('message.systems.importConfig')}}</el-button>
        <el-button @click="ExportIni">{{$t('message.systems.exportConfig')}}</el-button>
      </template>
    </setForm>
    <setForm id="5">
      <template slot="boxTop">{{$t('message.systems.sysUpdate')}}</template>
      <template slot="boxMain">
        <el-row>
          <el-col :span="17">
            <div id="normal">
              <input type="text" class="path" id="f_file1">
              <input type="button" :value="$t('message.systems.browse')" class="file" onClick="fileSys.click()">
              <input name="upload" type="file" id="fileSys" accept=".img,.tar,.tar.gz,.tgz" onchange="f_file1.value=this.value" style="display:none">
              <el-progress :stroke-width="10" :percentage="sysUploadPercent" style="width:65%;" v-show="isShowSysUploadProgres"></el-progress>
              <div id="wrapper1">
                <!--进度条容器-->
                <div id="progressbar1">
                  <!--用来模仿进度条推进效果的进度条元素-->
                  <div id="fill1"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-button class="btnsave" @click="UpdataSystem">{{$t('message.systems.upload')}}</el-button>
      </template>
    </setForm>
    <!-- 老化设置 -->
    <el-dialog :title="$t('message.systems.agingTest')" :visible.sync="agingVisible" width="35%">
      <el-form size="mini">
        <el-form-item :label="$t('message.systems.duration')" label-position="right">
          <div>
            <el-input id="duration" v-model="duration" v-validate="'required|duration'" type="number" class="layui-input" name="duration"></el-input>
            <br>
            <span v-show="this.errors.has('duration')" class="text-style"> {{ errors.first('duration') }} </span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="agingVisible = false">{{$t('message.cancel')}}</el-button>
          <el-button @click="onSaveAgingTest">{{$t('message.ok')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import setForm from "@/components/setForm";
  import mylist from "@/components/MyList";
  import {
    mapState
  } from "vuex";
  import _ from "lodash";
  import ebus from "@/libs/ebus";
  import {
    api,
    getHostName
  } from "@/libs/api";
  import nuid from "nuid";
  import axios from "axios";
  import {
    downloadFile,
    timeToStr
  } from '@/libs/utils'

  export default {
    created() {
      ebus.emit('getSystemTime', this);
      this.getServerInfo();//设备所属服务器
      this.autoAddSecondsByServertime(); //获取系统时间然后隔1s自动加1s
      this.intervalGetAgingState(); //隔段时间获取一次老化状态,若状态不是testing和finished就停止计时器
      this.intervalGetSysTime(); //隔段时间获取一次系统时间
      this.onDisconnect(); //系统掉线处理
    },
    beforeDestroy() {
      this.clearTimer();
    },
    computed: {
      ...mapState(["system"]),
      list() {
        var obj = this.system.productInfo;
        var arr = [];
        for (var propertyName in obj) {
          if (propertyName == 'customInfoFileUri' || propertyName == 'isDebugMode') {
            continue;
          }
          arr.push({
            name: this.$t("message.systems." + propertyName),
            value: obj[propertyName]
          });
        }
        return arr;
      },
      agingData() {
        var item = [];
        if (this.system.AgingState.length) {
          item = this.system.AgingState;
        }
        return item;
      },
      isShowStart() {
        return this.agingData[0].status == "idle";
      },
      isShowEnd() {
        return this.agingData[0].status == "finished";
      },
      isShowSetErr() {
        return (
          this.agingData[0].status == "testing" ||
          this.agingData[0].status == "finished"
        );
      },
      isShowClearErr() {
        return this.agingData[0].status == "error";
      },
      isShowAgingtest() {
        return (this.system.productInfo && this.system.productInfo.isDebugMode);
      }
    },
    components: {
      setForm,
      mylist
    },
    data() {
      return {
        serverInfo:{
          ipaddr: '',
          type: '',
          domain: '',
        },
        serverTypes: ["midis2", "midis3"],
        iniUploadPercent: 0,
        isShowIniUploadProgres: false,
        sysUploadPercent: 0,
        isShowSysUploadProgres: false,
        loading: false,
        fullscreenLoading: false,
        cfgloading: false,
        cfgfullscreenLoading: false,
        interval: null,
        testingInterval: null,
        systimeInterval: null,
        sysTime: "",
        serverAddr: "",
        autoSetTime: true,
        file: "",
        duration: 172800,
        agingVisible: false
      };
    },
    methods: {
      saveSystime() {
        if (this.errors.has("ipFormat")) {
          return;
        }
        var option = {
          autoSetTime: this.system.sysTime.autoSetTime,
          serverAddr: this.system.sysTime.NTPAddr
        };
        api.onRequest("$method.$set.sys.ntpServer", JSON.stringify(option), null, null, function (msg, reqReply) {
          var res = JSON.parse(msg);
          if (res.code == 0) {
            this.autoAddSecondsByServertime();
            this.intervalGetSysTime();
            ebus.emit('autoFitTime', this)
            api.onRequest('$method.$get.sys.datetime', null, null, null, function (msg1, reply1) {
              var res1 = JSON.parse(msg1)
              if (res1 && res1.code == 0 && res1.data && res1.data.datetime) {
                this.sysTime = res1.data.datetime;
              }
            }.bind(this))
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this));
      },
      onSysfilChange() {
        var file = document.getElementById("fileSys").files[0];
        if (!file) {
          this.notification('error', this.$t('message.file.noFile'))
          return;
        }
        var sufName = file.name.split('.')[file.name.split('.').length - 1]

        if (sufName != 'tar' && sufName != 'img' && sufName != 'tar.gz' && sufName != 'tgz') {

          this.clearUploadInutTxt('f_file1', 'fileSys')
          this.notification('error', this.$t('message.file.typeNotSupport'))
          return;
        }
      },
      UpdataSystem() {
        var file = document.getElementById("fileSys").files[0];
        this.file = file;
        if (!file) {
          this.notification('error', this.$t('message.file.noFile'))
          return;
        }
        var url = "$method.getUploadUrl.sys.netStorage.share0.info";
        var fileName = file.name;
        if (file.name.includes('.tar.gz')) {
          fileName = 'mainapp.tar.gz';
        } else if (file.name.includes('.img')) {
          fileName = 'firmware.img';
        } 
        var option = {
          fileType: "upgrade",
          fileName: fileName,
          fileSize: file.size
        };
        option = JSON.stringify(option);
        api.onRequest(
          url,
          option,
          null,
          null,
          function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              var xhr = new XMLHttpRequest();
              var url = "http://" + getHostName() + ":8080/_default" + res.data.url.substring(res.data.url.indexOf(
                "default") + 7);
              xhr.open("PUT", url, true);
              xhr.upload.addEventListener("progress", this.uploadSysProgress, true);
              xhr.onload = function (e) {

                this.loading = true;
                this.fullscreenLoading = true;
                var opt = {
                  url: res.data.url
                };
                api.onRequest("$method.start.sys.upgrade", JSON.stringify(opt), null, null, function (message,
                  reply) {
                  var res = JSON.parse(message);
                  if (res.code == 0) {
                    var uploadTimeout = setTimeout(() => {
                      var uploadInterval = setInterval(() => {
                        var ws = null
                        ws = new WebSocket(
                          "ws://" + getHostName() + ":8080/_ws/stbp"
                        );
                        ws.onopen = function () {
                          window.location.href =
                            "http://" + getHostName() + ":8080";
                          clearInterval(uploadInterval);
                          clearTimeout(uploadTimeout);
                        };
                      }, 3 * 1000);
                    }, 10 * 1000);
                    var waitOneMin = setTimeout(() => {
                      clearTimeout(uploadTimeout);
                      clearInterval(uploadInterval);
                      window.location.href = "http://" + getHostName() + ":8080";
                    }, 5 * 60 * 1000)
                  } else {
                    this.isShowSysUploadProgres = false;
                    this.loading = false;
                    this.fullscreenLoading = false;
                    this.showCodeMsg(res.code, this, res.msg);
                  }
                }.bind(this));
              }.bind(this);
              xhr.onerror = function (e) {
                this.loading = false;
                this.fullscreenLoading = false;
                this.isShowSysUploadProgres = false;
                this.notification("error", e);
                api.onRequest("uploadFail")
              }.bind(this);
              xhr.setRequestHeader("Authorization", "Bearer " + this.system.JWT);
              xhr.send(file);
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
          }.bind(this)
        );
      },
      uploadSysProgress(evt) {
        if (evt && evt.lengthComputable) {
          this.isShowSysUploadProgres = true;
          this.sysUploadPercent = parseInt(100 * evt.loaded / evt.total)
        }
      },
      uploadIniProgress(evt) {
        if (evt && evt.lengthComputable) {
          console.log('progress:', 100 * evt.loaded / evt.total)
          this.isShowIniUploadProgres = true;
          this.iniUploadPercent = parseInt(100 * evt.loaded / evt.total)
        }
      },
      checkFileValidated() {
        var file = document.getElementById("fileIni").files[0];
        this.file = file;
        if (!file) {
          this.notification('error', this.$t('message.file.noFile'))
          return;
        }
      },
      ImportIni() {
        var file = document.getElementById("fileIni").files[0];
        if (!file) {
          this.notification('error', this.$t('message.file.noFile'))
          return;
        }
        var url = "$method.getUploadUrl.sys.netStorage.share0.info"; //暂时写死，以后不一定只有一个目录
        var option = {
          fileType: "tmp",
          fileName: file.name,
          fileSize: file.size
        };

        option = JSON.stringify(option);
        api.onRequest(
          url,
          option,
          null,
          null,
          function (msg, reply) {
            (function (ctx) {
              var res = JSON.parse(msg);
              if (res.code == 0) {
                var xhr = new XMLHttpRequest();
                var url =
                  "http://" +
                  getHostName() +
                  ":8080/_default" +
                  res.data.url.substring(res.data.url.indexOf("default") + 7);
                xhr.open("PUT", url, true);
                xhr.upload.addEventListener("progress", ctx.uploadIniProgress, false);
                xhr.onload = function (e) {
                  ctx.cfgloading = true;
                  ctx.cfgfullscreenLoading = true;
                  var opt = {
                    url: res.data.url
                  };
                  api.onRequest(
                    "$method.importConfig.sys.cmd",
                    JSON.stringify(opt),
                    null,
                    null,
                    function (message, reply) {
                      var res = JSON.parse(message);
                      if (res.code == 0) {
                        var uploadTimeout = setTimeout(() => {
                          var uploadInterval = setInterval(() => {
                            var ws = new WebSocket(
                              "ws://" + getHostName() + ":8080/_ws/stbp"
                            );
                            ws.onopen = function () {
                              ctx.cfgloading = false;
                              ctx.cfgfullscreenLoading = false;
                              window.location.href =
                                "http://" + getHostName() + ":8080";
                              clearInterval(uploadInterval);
                              clearTimeout(uploadTimeout);
                            };
                          }, 1000);
                        }, 5000);
                      } else {
                        ctx.cfgloading = false;
                        ctx.cfgfullscreenLoading = false;
                        ctx.showCodeMsg(res.code, ctx, res.msg);
                      }
                    }.bind(this)
                  );
                }.bind(this);
                xhr.onerror = function (e) {
                  ctx.cfgloading = false;
                  ctx.cfgfullscreenLoading = false;
                  ctx.notification("error", e);
                };
                xhr.setRequestHeader(
                  "Authorization",
                  "Bearer " + ctx.system.JWT
                );

                xhr.send(file);
              } else {
                ctx.showCodeMsg(res.code, ctx, res.msg);
              }
            })(this);
          }.bind(this)
        );
      },
      ExportIni() {
        var url = "$method.exportConfig.sys.cmd";
        api.onRequest(url).then((msg) => {
          var res = JSON.parse(msg);
          if (res.code == 0) {
            var url = "http://" + getHostName() + ":8080/_default" + res.data.url.substring(res.data.url.indexOf(
              "default") + 7);
            var fileName = res.data.url.split("/")[res.data.url.split("/").length - 1];
            downloadFile(url, fileName)
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        });
      },
      editAgingTest(idex, row) {
        this.agingVisible = true;
      },
      onSaveAgingTest() {
        if (this.errors.has("duration")) {
          return;
        }
        var option = {
          duration: parseInt(this.duration)
        };

        var url = "$method.startTest.sys.aging";
        api.onRequest(
          url,
          JSON.stringify(option),
          null,
          null,
          function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              this.notification("Success", "");
              ebus.emit("getAgingStates", this);
              this.intervalGetAgingState();
              this.agingVisible = false;
              // this.testingInterval = setInterval(() => {
              //   if (this.agingData[0].status == "testing") {
              //     ebus.emit("getAgingStates", this);
              //   } else {
              //     if (this.testingInterval) {
              //       clearInterval(this.testingInterval);
              //     }
              //   }
              // }, 1000);
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
          }.bind(this)
        );
      },
      endAgingTest() {
        this.$confirm(this.$t("message.willbeshutdown"), this.$t("message.ok"), {
          confirmButtonText: this.$t("message.ok"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }).then(() => {
          var url = "$method.endTest.sys.aging";
          api.onRequest(
            url,
            null,
            null,
            null,
            function (msg, reply) {
              var res = JSON.parse(msg);
              if (res.code == 0) {
                this.$router.push("/login");
                this.notification("Success", "");
                ebus.emit("getAgingStates", this);
              } else {
                this.showCodeMsg(res.code, this, res.msg);
                // this.notification("error", res.msg);
              }
            }.bind(this)
          );
        });
      },
      setTestError() {
        var url = "$method.setTestError.sys.aging";
        api.onRequest(
          url,
          null,
          null,
          null,
          function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              this.notification("Success", "");
              ebus.emit("getAgingStates", this);
            } else {
              this.showCodeMsg(res.code, this, res.msg);
              // this.notification("error", res.msg);
            }
          }.bind(this)
        );
      },
      clearTestError() {
        var url = "$method.clearTestError.sys.aging";
        api.onRequest(
          url,
          null,
          null,
          null,
          function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              this.notification("Success", "");
              ebus.emit("getAgingStates", this);
            } else {
              this.showCodeMsg(res.code, this, res.msg);
              // this.notification("error", res.msg);
            }
          }.bind(this)
        );
      },
      saveDevName() {
        if (this.errors.has("valiName")) {
          return;
        }
        var url = "$method.$set.sys.product";
        var test = this.system.productInfo;

        api.onRequest(
          url,
          JSON.stringify(this.system.productInfo),
          null,
          null,
          function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              ebus.emit('getProductInfo', this)
              this.notification("Success", "");
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
          }.bind(this)
        );
      },
      timeToStr(time) {
        return timeToStr(time);
      },
      intervalGetAgingState() {
        this.testingInterval = setInterval(() => {
          ebus.emit("getAgingStates", this);
          if (this.agingData[0].status == "testing" || this.agingData[0].status == "finished") {
            ebus.emit("getAgingStates", this);
          } else {
            if (this.testingInterval) {
              clearInterval(this.testingInterval);
            }
          }
        }, 5000);
      },
      onFitLocalTime() {
        var option = {
          datetime: this.timeToStr(new Date())
        }
        api.onRequest('$method.$set.sys.datetime', JSON.stringify(option), null, null, function (msg1, reply1) {
          var res1 = JSON.parse(msg1)
          if (res1 && res1.code == 0) {
            this.autoAddSecondsByServertime();
            this.intervalGetSysTime();
            ebus.emit("getSystemTime", this);
            this.notification("Success", "");
            this.sysTime = this.timeToStr(new Date())
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this))

      },
      onSaveTime() {
        var option = {
          datetime: this.timeToStr(new Date(this.sysTime))
        }
        api.onRequest('$method.$set.sys.datetime', JSON.stringify(option), null, null, function (msg1, reply1) {
          var res1 = JSON.parse(msg1)
          if (res1 && res1.code == 0) {
            this.autoAddSecondsByServertime();
            this.intervalGetSysTime();
            ebus.emit("getSystemTime", this);
            this.notification("Success", "");
            this.sysTime = this.timeToStr(new Date())
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this))

      },
      intervalGetSysTime() {
        if (this.systimeInterval) {
          clearInterval(this.systimeInterval);
        }
        this.systimeInterval = setInterval(() => {
          api.onRequest('$method.$get.sys.datetime', null, null, null, (msg, reply) => {
            var res = JSON.parse(msg)
            if (res && res.code == 0 && res.data && res.data.datetime) {
              this.sysTime = res.data.datetime;
              this.$store.dispatch("system/getSystemTime", res.data.datetime);
              if (!this.interval) {
                this.autoAddSecondsByServertime();
              }
            } else {
              this.$store.dispatch("system/getSystemTime", '');
            }
          }).then((msg1, reply) => {

          }, err => {
            if (this.interval) {
              clearInterval(this.interval);
            }
          })
        }, 5 * 1000);
      },
      clearUploadInutTxt(showVal, fileId) {
        var sysInput = document.getElementById(showVal)
        var fileSys = document.getElementById(fileId)
        sysInput.value = ''
        fileSys.value = ''
      },
      autoAddSecondsByServertime() {
        if (this.interval) {
          clearInterval(this.interval);
        }
        this.interval = setInterval(() => {
          if (this.system.sysTime.sysTime && !this.sysTime) {
            this.sysTime = this.system.sysTime.sysTime;
          }
          if (this.sysTime) {
            var now = new Date(this.sysTime);
            now.setSeconds(now.getSeconds() + 1);
            this.sysTime = this.timeToStr(now);
          }
        }, 1000);
      },
      onDisconnect() {
        ebus.on('disconnct', () => {
          
          this.clearTimer();
          api.DisConnect()
          if (!this.loading && !this.fullscreenLoading) {
            this.$router.push('/login')
            // window.location.href = `http://${getHostName()}:8080`    
            this.notification("warning", this.$t('message.devDisconnect'));

          }
        });
      },
      clearTimer() {
        if (this.interval) {
          clearInterval(this.interval);
        }
        if (this.testingInterval) {
          clearInterval(this.testingInterval);
        }
        if (this.systimeInterval) {
          clearInterval(this.systimeInterval)
        }
      },
      onTimeClick() {
        if (this.interval) {
          clearInterval(this.interval);
        }
        if (this.systimeInterval) {
          clearInterval(this.systimeInterval)
        }
      },
      getServerInfo(){
        api.onRequest('$method.$get.sys.server', null, null, null, function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              this.serverInfo = res.data
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
          }.bind(this)
        );
      },
      saveSysServerInfo(){
        if(this.errors.has('IP')){
          return;
        }
        // this.getServerInfo();
        api.onRequest('$method.$set.sys.server', JSON.stringify(this.serverInfo), null, null, function (msg, reply) {
            var res = JSON.parse(msg);
            if (res.code == 0) {
              this.notification("Success", "");
              this.getServerInfo();
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
          }.bind(this)
        );
      }
    }
  };

</script>

<style scoped>
  #wrapper,
  #wrapper1 {
    position: relative;
    width: 95%;
    height: 50;
    color: #fff;
  }

  #progressbar,
  #progressbar1 {
    margin-left: 12px;
    margin-top: 22px;
    width: 100%;
    height: 20px;
  }

  #fill,
  #fill1 {
    animation: move 2s;
    text-align: center;
    background-color: #20a0ff;
  }

  .path {
    width: 60%;
    height: 24px;
  }

  .file {
    height: 30px;
    border-top: 1px;
  }

</style>
